import React, {PureComponent} from 'react';
import {StyleSheet, Text, View, TextInput, TouchableOpacity, Image, Platform} from 'react-native';

export default class extends PureComponent {
    search = () => {
        const {getData, resetPage, keywords, showToast} = this.props;
        if (!keywords) {
            showToast('清先输入搜索关键字');
            return;
        }
        resetPage(getData);
    };

    render() {
        const {navigation, setKeywords, keywords, toggleSearchHistory} = this.props;
        return (
            <View style={styles.container}>
                <TouchableOpacity onPress={() => {
                    navigation.goBack()
                }}>
                    <Image source={require('../../../images/icon_arrow_left.png')} style={styles.arrow}/>
                </TouchableOpacity>
                <TextInput placeholder="粘贴宝贝标题，先领券再购物"
                           onChangeText={text => {
                               setKeywords(text.trim());
                           }}
                           onFocus={() => {
                               toggleSearchHistory(true);
                           }}
                           returnKeyType="done"
                           clearButtonMode="always"
                           underlineColorAndroid="transparent"
                           style={styles.input}
                           value={keywords}
                           maxLength={100}/>
                <Image source={require('./img/search.png')} style={styles.icon}/>
                <TouchableOpacity onPress={this.search}>
                    <View style={styles.btnWrap}>
                        <Text style={styles.btnText}>搜索</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        ...Platform.select({
            ios: {
                height: 64,
                paddingTop: 20
            },
            android: {
                height: 44
            }
        }),
        alignItems: 'center',
        backgroundColor: '#ffffff',
        paddingLeft: 8,
        paddingRight: 12,
        marginBottom: 1
    },
    arrow: {
        width: 30,
        height: 30
    },
    icon: {
        width: 14,
        height: 14,
        position: 'absolute',
        left: 48,
        ...Platform.select({
            ios: {
                top: 36
            },
            android: {
                height: 16
            }
        })
    },

    input: {
        flex: 1,
        height: 24,
        borderRadius: 4,
        backgroundColor: '#ededed',
        fontSize: 12,
        paddingLeft: 28,
        paddingRight: 16,
        paddingTop: 0,
        paddingBottom: 0,
        marginLeft: 2,
        marginRight: 8
    },
    btnWrap: {
        paddingLeft: 10,
        paddingRight: 10,
        backgroundColor: '#fa2d1e',
        borderRadius: 21
    },
    btnText: {
        fontSize: 12,
        color: '#fff',
        height: 21,
        lineHeight: 21
    }
});
